<!--
 * @Description: jquery
 * @Author: rendc
 * @Date: 2022-09-06 14:12:42
 * @LastEditors: rendc
 * @LastEditTime: 2022-09-06 14:56:21
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jquery</title>
  <script>
    // 使用dom
    // window.onload = function () {
    //   // alert('hello');
    //   document.getElementById('app').style.display = 'none';
    // }
  </script>
  <!-- jquery -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
  <script>
    $(document).ready(function () {
      // alert("hello-jquery");
      // document.getElementById('app').style.display = 'none';
      // $("#app").hide();
      // $(".div1") == document.getElementsByClassName('div1');
      $(".div1").css("color", "red");
      $(".div1.div3").css("color", "blue");
      $("span").css("border", "1px solid hotpink")
      $("#app").click(function () {
        $(this).hide();
        console.log("div-app被点击");
      })
      $("#showA").click(function () {
        // 隐藏当前行
        $(this).hide();
        // 显示答案
        // $("#A").show();
        $("#A").fadeIn();
      })
      $("#div3").mousemove(function () {
        // console.log("鼠标在div3上面经过了");
      })
      $("#name").change(function () {
        console.log("input框中的值发生了变化");
        // 执行表单校验
      })
      $("#mySpan").fadeOut();
      // $("#mySpan").width();
      // $("#mySpan").height();
      $("#mySpan").addClass("mySpan span");
      $("#mySpan").removeAttr("class");
      // $("#mySpan").removeClass("mySpan");
      $("#mySpan").show();
      // ready的结尾
    })
  </script>
</head>

<body>
  <input type="text" id="name">
  <div id="app">
    点击隐藏app
  </div>
  <div>题目：今天是周几？</div>
  <div id="showA">点击显示答案</div>
  <div id="A" style="display: none;">答案：今天是周二</div>
  <div id="div1" class="div1">div1</div>
  <div id="div2" class="div1">div2</div>
  <div id="div3" class="div1 div3">div3</div>
  <span id="mySpan">span</span>
</body>

</html>